<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>事件</title>
    <style>
        [v-cloat] {
            display: none;
        }

        .list {
            width: 100%;
            height: 25px;
            margin-bottom: 10px;
        }

        .list.active {
            background-color: #0000FF;
            color: #FFFFFF;
        }

        .box {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            z-index: 1
        }

        .box.active {
            width: 100px;
            height: 100px;
            background: red
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <ul>
            <li :class="{list:true,active:item.active}" v-for="(item,index) in list" :key="index"
                @click="checkedItem(index)">{{item.name}}-<button type="button" @click.stop="delItem(index)">删除</button>
            </li>
        </ul>
        <!--<button type="button" @click.once="submitOrder()">提交订单</button>-->
        <button type="button" @click="submitOrder()">提交订单</button>
        <div :style="{left:moveX,top:moveY}" :class="{box:true,active:isActive}" 
            @mouseover="isActive=true"
            @mouseout="isActive=false" 
            @mousemove="moveBox($event)" 
            @touchmove="touchmoveBox($event)"
            @touchstart="startBox($event)"
            @touchend="endBox()"></div>
        <input type="text" @keyup.enter="submit($event)" v-model="url">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    list: [
                        { id: 1, name: "张三", age: 28, active: false },
                        { id: 2, name: "李四", age: 18, active: false },
                        { id: 3, name: "王五", age: 38, active: false }
                    ],
                    isSubmit: true,
                    isActive: false,
                    moveX: 0,
                    moveY: 0,
                    startX: 0,
                    startY: 0,
                    url: ""
                }
            },
            methods: {
                checkedItem(index) {
                    // console.log(index);
                    this.list[index].active = !this.list[index].active;
                },
                delItem(index) {
                    // console.log("删除");
                    if (confirm("确认要删除吗？")) {
                        this.list.splice(index, 1);
                    }
                },
                submitOrder() {
                    //只提交一次
                    if (this.isSubmit) {
                        this.isSubmit = false;
                        alert("提交订单");
                    }
                },
                moveBox(e) {
                    // console.log(e);
                },
                startBox(e) {
                    this.isActive = false
                    this.startX = e.touches[0].pageX - parseInt(this.moveX);
                    this.startY = e.touches[0].pageY - parseInt(this.moveY);
                    // console.log(this.startX,this.startY);
                },
                touchmoveBox(e) {
                    this.moveX = e.touches[0].pageX - this.startX + "px";
                    this.moveY = e.touches[0].pageY - this.startY + "px";
                },
                endBox() {
                    this.isActive = true
                },
                submit(e) {
                    // console.log(e);
                    window.open(this.url);
                }
            }
        })
    </script>
</body>

</html>